<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>码蚁图册|首页</title>
    <script th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
    <script th:src="@{js/jquerySession.js}"></script>
    <script th:src="@{js/modal.js}"></script>
    <script th:src="@{js/index.js}"></script>
    <script th:src="@{js/indexSocket.js}"></script>
    <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{css/index.css}" rel="stylesheet"/>
    <link th:href="@{css/bootstrap.css}" rel="stylesheet"/>
</head>
<body>
<!-- 以下是基础代码 -->
    <div class="container-fluid">
        <div id="title" class="row">
            <h1 style="font-family: newFontFamily" class="text-left col-md-6">码蚁图库,最好的图库</h1>
            <div class="col-md-6">
                <ul class="list-inline row justify-content-center">
                    <li class="hidden-lg hidden-lg col-3 text-center" id="userMessage"><span class="glyphicon glyphicon-user"></span></li>
                    <li class="col-sm-3 col-3 text-center"><span id="email" class="tab glyphicon glyphicon-envelope" data-toggle="modal" data-target="#friends"></span></li>
                    <li class="col-sm-3 col-3 text-center"><span class="tab glyphicon glyphicon-comment"></span></li>
                    <li class="col-sm-3 col-3 text-center"><span class="tab glyphicon glyphicon-cog"></span></li>
                    <li class="col-sm-3 col-3 text-center hidden-sm hidden-xs" id="off"><span class="tab glyphicon glyphicon-off"></span></li>
                </ul>
            </div>
        </div>
        <div class="row" id="content">
            <div id="MyMessage" class="row col-12 col-md-5 col-lg-3 d-none d-md-block">
                <div id="Message" class="col-12">
                    <div id="msg" class="row">
                        <div id="messages">
                            <div class="text-center">
                                <div id="MessageImage">
                                    [[${#strings.substring(User.userName,0,1)}]]
                                </div>
                                <div style="font-family: newFontFamily;" id="MessageUser">
                                    <h4 id="userName">用户名:[[${User.userName}]]</h4>
                                    <div id="userNumber">账号:[[${User.userNumber}]]</div>
                                    <div id="meNumber" style="display: none">[[${User.userNumber}]]</div>
                                </div>
                            </div>
                            <div class="row text-center" id="myResource">
                                <div class="col-sm-6 col-6 tab">
                                    <img src="/image/collection.png"/>收藏
                                </div>
                                <div class="col-sm-6 col-6 tab" data-toggle="modal" data-target="#friends">
                                    <img src="/image/friend.png"/>好友
                                </div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="Images" class="row col-12 col-md-7 col-lg-8 text-center">
                <div id="Image" class="text-center"></div>
            </div>
        </div>
    </div>

<!--  下面是好友界面相关的模态框  -->
<div class="modal" id="friends" role="dialog" aria-labelledby="myModalLabel"></div>

<!-- 下面是版权声明 -->
    <div th:replace="Login::foot"></div>
</body>
</html>